<template>
	<view class="pyq-box">
		<view class="pyq_avatar">
			<image :src="pyqInfo.avatar"></image>
		</view>
		<view class="pyq-body">
			<view class="pyq-body_user">
				<view class="name">
					<uv-text bold size="16"
						:text="`${pyqInfo.name}${pyqInfo.shopname?'—'+pyqInfo.shopname:''}`"></uv-text>

				</view>
				<!-- <view class="totop"><uv-icon name="/static/pyq01.png" label="置顶" labelColor='#ff3600' size="16"
						labelSize="13" @click="handlesetTop(item)"></uv-icon></view> -->
			</view>
			<view class="address margin-tb-xs">
				<image src="../../static/address.png" mode="widthFix"></image>
				<text class="text-sm">{{pyqInfo.ipplace}}</text>
			</view>

			<view @click="todetail">
				<view class="pyq-body_title">
					<text>近一个月自动同步朋友圈车源</text>
					<text class="text-red text-bold">{{pyqInfo.allcount}}</text>
					<text>条</text>
				</view>
				<view class="text-gray text-sm margin-top-xs">
					<text>{{getbefore()}}</text><text class="margin-lr-xs">|</text>
					<text>{{pyqInfo.viewcount}}浏览</text>
				</view>

				<view class="pyq-body_content">
					<view v-if="pyqInfo.istop=='1'" class="pyq-top">
						<image src="../../static/pyq03.png"></image>
					</view>
					<text>{{pyqInfo.content}}</text>
				</view>

			</view>
			<view v-if="pyqInfo.imgnum" class="margin-top-sm">
				<uv-album :urls="pyqInfo.imglist" multipleSize="180rpx" :maxCount="3"></uv-album>
			</view>

			<view class="pyq-body_foot">
				<!-- <uv-button class="commit" icon="chat-fill" color="#FFF" :customTextStyle="{color:'#000'}"
					:text="`评论 (${pyqInfo.commcount})`" @click="todetail"></uv-button> -->
				<view class="right">
					<uv-button icon="phone-fill" iconColor='#fa8d14' :customStyle="btncust" text="打电话"
						@click="callphone"></uv-button>
					<uv-button icon="weixin-fill" iconColor="#07c160" :customStyle="btncust" text="加微信"
						@click="copywx"></uv-button>
					<uv-button icon="share-fill" iconColor="#3d9eff" :customStyle="btncust" open-type="share"
						text="分享"></uv-button>
						<uv-button icon="pushpin-fill" iconColor="#ff3600" :customTextStyle="{color:'#ff3600'}" :customStyle="btncust" open-type="share"
							text="置顶"></uv-button>

				</view>
			</view>

		</view>
		<uv-action-sheet ref="ref_action" cancelText="取消" :actions="topPackage" round="10" title="选择置顶"
			description='主页+搜索车友置顶优先显示,大幅提升车源曝光,并获得"置顶"标签,置顶剩余时长越长越靠前' @select="handleTop"></uv-action-sheet>
	</view>
</template>

<script>
	import { timetobefor } from '@/common/tools.js'
	import { mapState } from 'vuex'
	import {  buyTop } from '@/utils/http.js'
	export default {
		name: "fy-pyq-item",
		props: {
			pyqInfo: {
				type: Object
			}
		},
		data() {
			return {
				btncust: {
					padding: '0 5px',
					border: 'none'
				}, 
				wxcode: ''
			};
		},
		computed: {
			...mapState({ topPackage: state => state.syspackage.topPackage })
		},
		methods: {
			handlesetTop() {
				let that = this
				uni.login({
					success(res) {
						const { code } = res
						that.wxcode = code
					}
				})
				this.$refs.ref_action.open()
			},
			async handleTop(e) {
				let that = this
				var parm = { type: 'pyq', id: this.pyqInfo.id, topid: e.id, code: this.wxcode }
				const { data, code } = await buyTop(parm)
				const { appId, nonceStr, packageVal, paySign, signType, timestamp } = data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(timestamp),
					nonceStr: nonceStr,
					package: packageVal,
					signType: signType,
					paySign: paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.fetchData()
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'fail'
						})
					}
				})
			},
			getbefore() {
				return timetobefor(this.pyqInfo.createtime)
			},
			callphone() {

				uni.makePhoneCall({ phoneNumber: this.pyqInfo.phone })
			},
			copywx() {
				uni.setClipboardData({
					data: this.pyqInfo.wxno,
					showToast: true
				})
			},
			todetail() {
				const parm = `id=${this.pyqInfo.id}&userid=${this.pyqInfo.userid}`
				const url = '/pages/pyq/detail?' + parm

				uni.navigateTo({ url: url })
			},
		}
	}
</script>

<style lang="scss">
	.pyq-box {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		margin: 20upx 20upx;
		position: relative;
		border-radius: 10upx;

		.pyq_avatar {
			padding: 20upx 0 0 20upx;

			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
		}

		.pyq-body {
			padding: 20upx;
			flex: 1;

			&_user {
				display: flex;

				.name {
					flex: 1;
				}

				.totop {
					width: 126upx;
					border-radius: 30upx;
					border: 1upx solid #ff3600;
					text-align: center;
					padding: 6upx 0;
					padding-left: 12upx;
				}
			}

			.address {
				color: #999;

				image {
					width: 30upx;
					height: 30upx;
					vertical-align: middle;
					margin: -6upx 10upx 0 0;
				}
			}

			&_title {
				font-size: 24upx;
				color: #909399;
			}

			&_content {
				padding: 16upx 0 0upx 0;

				.pyq-top {

					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 80upx;
						height: 80upx;
					}
				}
			}

			&_foot {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.commit {
					flex: 1;
				}

				.right {
					display: flex;
					justify-content: flex-end;
					width: 100%;
				}
			}

			&_commit {
				flex: 1;
			}

			.click_active {
				transition: all 0.5s;
				background-color: #fff;

				&:active {
					background-color: #909399;
					transition: all 0s;
				}

			}
		}
	}

	.pyq-box .uv-album__row__wrapper__text {
		border-radius: 6upx;
	}
</style>